<template>
  <div class="store-compare-component all">
    <div class="section-container">
      <ul class="tab-bar">
        <li
          class="checked"
          :key="index"
          v-for="(item,index) in tabCompent3.tabList"
          @click="toggleTab(tabCompent3,index)"
          :class="{selected:index == tabCompent3.tabIndex}"
        >{{item}}</li>
      </ul>
    </div>
    <div class="scroll-container">
      <div class="section" v-if="0 === tabCompent3.tabIndex">
        <ul class="table">
          <li>
            <div>序号</div>
            <div>门店</div>
            <div>实收金额(元)</div>
            <div>占比(%)</div>
          </li>
        </ul>
        <div
          class="scroll-wrap"
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="loading"
          infinite-scroll-distance="30"
        >
          <ul class="table">
            <li v-for="(item,index) in dataList" :key="item.id">
              <div>{{ index+1 }}</div>
              <div>{{ item.name }}</div>
              <div>{{ item.receiveMoney }}</div>
              <div>{{ item.receiveProportion }}</div>
            </li>
          </ul>
          <p v-show="loading" class="page-infinite-loading">
            <mt-spinner :style="{display:'inline-block'}" type="fading-circle"></mt-spinner>
          </p>
          <div v-show="noMore&&!loading&&dataList.length!==0" class="no-more">
            <span>已经全部加载完毕</span>
          </div>
          <noData msg="暂无数据" v-show="dataList.length===0&&!loading" />
        </div>
      </div>
      <div class="section" v-if="1 === tabCompent3.tabIndex">
        <ul class="table">
          <li>
            <div>序号</div>
            <div>门店</div>
            <div>订单金额(元)</div>
            <div>占比(%)</div>
          </li>
        </ul>
        <div
          class="scroll-wrap"
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="loading"
          infinite-scroll-distance="30"
        >
          <ul class="table">
            <li v-for="(item,index) in dataList" :key="item.id">
              <div>{{ index+1 }}</div>
              <div>{{ item.name }}</div>
              <div>{{ item.orderPrice }}</div>
              <div>{{ item.orderPriceProportion }}</div>
            </li>
          </ul>
          <p v-show="loading" class="page-infinite-loading">
            <mt-spinner :style="{display:'inline-block'}" type="fading-circle"></mt-spinner>
          </p>
          <div v-show="noMore&&!loading&&dataList.length!==0" class="no-more">
            <span>已经全部加载完毕</span>
          </div>
          <noData msg="暂无数据" v-show="dataList.length===0&&!loading" />
        </div>
      </div>
      <div class="section" v-if="2 === tabCompent3.tabIndex">
        <ul class="table">
          <li>
            <div>序号</div>
            <div>门店</div>
            <div>笔单价(元)</div>
          </li>
        </ul>
        <div
          class="scroll-wrap"
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="loading"
          infinite-scroll-distance="30"
        >
          <ul class="table">
            <li v-for="(item,index) in dataList" :key="item.id">
              <div>{{ index+1 }}</div>
              <div>{{ item.name }}</div>
              <div>{{ item.unitPrice }}</div>
            </li>
          </ul>
          <p v-show="loading" class="page-infinite-loading">
            <mt-spinner :style="{display:'inline-block'}" type="fading-circle"></mt-spinner>
          </p>
          <div v-show="noMore&&!loading&&dataList.length!==0" class="no-more">
            <span>已经全部加载完毕</span>
          </div>
          <noData msg="暂无数据" v-show="dataList.length===0&&!loading" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Toast } from "mint-ui";
import config from "../../base/profile/config.json";
import jsBridge from "../../tools/jsBridge.js";
import noData from "../../components/noData/noData";
import { Popup } from "mint-ui";
Vue.component(Popup.name, Popup);
export default {
  name: "storeCompareComponent",
  data() {
    return {
      startDate: "",
      endDate: "",
      currentPage: 1, //当前页
      pageSize: 10, //每页显示大小
      loading: false,
      noMore: false,
      wrapperHeight: 0,
      tabCompent3: { tabList: ["实收金额", "订单金额", "笔单价"], tabIndex: 0 },
      dataList: [
      ],
      popupVisible: this.visible,
    };
  },
  props: {
    filterData: Object,
    visible: Boolean,
  },
  methods: {
    storeDataSort() {
      let sortField = "";//排序字段
      if (this.tabCompent3.tabIndex == 0) {
        sortField = "receiveMoney";
      } else if (this.tabCompent3.tabIndex == 1) {
        sortField = "orderPrice";
      } else if (this.tabCompent3.tabIndex == 2) {
        sortField = "unitPrice";
      }
      const dataList = this.dataList.sort((a, b) => {
        return b[sortField] - a[sortField];
      });
      this.dataList = dataList;
    },
    toggleTab(tabCompent, index) {
      tabCompent.tabIndex = index;
      this.storeDataSort();
    },
    //无限加载
    loadMore() {
      if (this.loading || this.noMore || !this.popupVisible) {
        return;
      }
      this.getStoreData();
    },
    getStoreData() {
      this.loading = true;
      var startDate = this.startDate;
      var endDate = this.endDate;
      var currentPage = this.currentPage;
      if (currentPage == 1) {
        this.dataList = [];
      }

      var pageSize = this.pageSize;
      this.ajax({
        url: "/newapp/statistics/queryStoreDataNew.do?startDate=" + startDate + "&endDate=" + endDate + "&currentPage=" + currentPage + "&pageSize=" + pageSize + "&dateFlag=0",
        type: "get",
        controlLoading: false
      })
        .then((res) => {
          this.loading = false;
          if (res.success) {
            var data = res.resultObject;
            if (data != null && data.dataList.length > 0) {
              // var size = this.dataList.length;
              // var model;
              // for (var i = 0; i < data.dataList.length; i++) {
              //   var shopAnountCnt = data.dataList[i].shopAnountCnt == null ? 0 : (parseFloat(data.dataList[i].shopAnountCnt) * 100).toFixed(2);
              //   var orderAnountCnt = data.dataList[i].orderAnountCnt == null ? 0 : (parseFloat(data.dataList[i].orderAnountCnt) * 100).toFixed(2);
              //   model = {
              //     rank: size + i + 1,
              //     name: data.dataList[i].shopName,
              //     receiveMoney: data.dataList[i].shopAmount,
              //     receiveProportion: shopAnountCnt + "%",
              //     orderPrice: data.dataList[i].orderConsumAmount,
              //     orderPriceProportion: orderAnountCnt + "%",
              //     unitPrice: data.dataList[i].orderConsumCnt
              //   };
              //   Vue.set(this.dataList, size + i, model);
              // }
              data.dataList.map((item) => {
                let shopAnountCnt = item.shopAnountCnt == null ? 0 : (parseFloat(item.shopAnountCnt) * 100).toFixed(2);
                let orderAnountCnt = item.orderAnountCnt == null ? 0 : (parseFloat(item.orderAnountCnt) * 100).toFixed(2);
                item.name = item.shopName;
                item.receiveMoney = item.shopAmount;
                item.receiveProportion = shopAnountCnt + "%";
                item.orderPrice = item.orderConsumAmount;
                item.orderPriceProportion = orderAnountCnt + "%";
                item.unitPrice = item.orderConsumCnt.toFixed(2);
                return item;
              });

              this.dataList = this.dataList.concat(data.dataList);
              this.storeDataSort();
              if (this.dataList.length < data.dataAllCount) {
                this.noMore = false;
                this.currentPage = this.currentPage + 1;
              } else {
                this.noMore = true;
              }
              this.loading = false;
            } else {
              this.noMore = true;
            }
          } else {
            this.noMore = true;
          }
        })
        .catch((err) => {
          this.noMore = true;
          this.loading = false;
        });
    }
  },
  watch: {
    filterData: {
      handler(newVal, oldVal) {
        if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
          this.startDate = newVal.startDate;
          this.endDate = newVal.endDate;
          this.currentPage = 1;
          this.tabCompent3.tabIndex = newVal.tabIndex;
          this.getStoreData();
        }
      },
      deep: true
    },
    visible(v) {
      this.popupVisible = v;
    }
  },
  created() {
    const data = this.filterData;
    if (data && JSON.stringify(data) != "{}") {
      this.startDate = data.startDate;
      this.endDate = data.endDate;
      this.currentPage = 1;
      this.tabCompent3.tabIndex = data.tabIndex;
    }
  },
  components: {
    noData
  },
};
</script>
<style lang='scss'>
@import "storeCompareComponent";
</style>
